import React from "react"
import {  Badge, Tabs, Popover} from 'antd'
import SearchArea from 'components/search-area';
import menuRoute from 'routes/menuRoute'
import ResizeTable from 'components/resize-table'
import {messages} from "share/common";
import ReportDistributionService from "containers/report-distribution/report-distribution.service";
const TabPane = Tabs.TabPane;
class ReportDistribution extends React.Component{
  constructor(){
    super();
    this.state = {
      loading: false,
      data: [],
      pagination: {
        total: 0,
        current: 1,
      },
      page: 0,
      pageSize: 10,
      status: 'ASSIGNED',
      tabs: [
        {key: 'ASSIGNED', name: messages('report-distribution.key30'/*已分配*/)}, //已分配
        {key: 'UNASSIGNED', name: messages('report-distribution.key31'/*未分配*/)} //未分配
      ],
      searchParams: {
        name: '',
        code: '',
        reportHeadAttr: null,
        status: null
      },
      assignedSearchForm: [
        //报表名称/报表ID
        {type: 'input', id: 'name', label: messages('report-distribution.key32'/*报表名称/报表ID*/)},
        //报表类型
        {type: 'radio', id: 'reportAttr', label: messages('report-distribution.key5'/*报表类型*/),
          options:[
            {
              value: "",
              label: messages("common.all")
            },
            {
              value: "public",
              label: messages('report-distribution.key6'/*公开*/)
            },
            {
              value: "private",
              label: messages('report-distribution.key7'/*私有*/)
            }],
          defaultValue: ""
        },
        //状态
        {type: 'radio', id: 'status', label: messages("common.column.status"),
          options:[
            {
              value: "",
              label: messages("common.all")
            },
            {
              value: "open",
              label: messages('report-distribution.key10'/*启用*/)
            },
            {
              value: "closed",
              label: messages('report-distribution.key11'/*未启用*/)
            }],
          defaultValue: ""
        }
      ],
      unassignedSearchForm: [
        //报表名称/报表ID
        {type: 'input', id: 'name', label: messages('report-distribution.key32'/*报表名称/报表ID*/)},
        //报表类型
        {type: 'radio', id: 'reportAttr', label: messages('report-distribution.key5'/*报表类型*/),
          options:[
            {
              value: "",
              label: messages("common.all")
            },
            {
              value: "public",
              label: messages('report-distribution.key6'/*公开*/)
            },
            {
              value: "private",
              label: messages('report-distribution.key7'/*私有*/)
            }],
          defaultValue: ""
        }
      ],
      columns: [
        {title: messages("common.sequence"), dataIndex: 'index', width: '6%'},    //序号
        {title: messages('report-distribution.key1'/*报表名称*/), dataIndex: "name",render: value => {
            return <Popover placement="topLeft" content={value}>{value}</Popover>
          }},    //报表名称
        {title: messages('report-distribution.key2'/*报表ID*/), dataIndex: "code"},    //报表ID
        {title: messages('report-distribution.key4'/*报表描述*/), dataIndex: "comments", render: value => {
            return <Popover placement="topLeft" content={value}>{value}</Popover>
          }},    //报表描述
        {title: messages('report-distribution.key5'/*报表类型*/), dataIndex: "reportAttr",width: '12%', render: reportAttr => (
            reportAttr === "public" ? messages('report-distribution.key6'/*公开*/) : messages('report-distribution.key7'/*私有*/)
          )},
        {title: messages('report-distribution.key33'/*分配数量*/), dataIndex: "assignNum"},    //分配数量
        {title: messages("common.column.status"), dataIndex: "status",width: '12%', render: status => ( //状态
            <Badge  status = {status === "open" ? 'success' : 'error'}
                    text = {this.refreshStatus(status)}/>
          )},
        {title: messages("common.operation"), key: 'operation', width: '12%', render: (text, record) => (  //操作
            <span>
            <a onClick={(e) => this.handleViewDetail(e, record)}>{messages ("common.detail")}</a>
          </span>)
        }   //操作
      ],
      reportHeadOID: ''
    };
    this.reportDetail = menuRoute.getRouteItem('report-distribution-details', 'key');
  }
  componentWillMount() {
    this.getList();
  }

  //列表状态国际化传值
  refreshStatus = (status) => {
      if(status === "open")
        return messages('report-distribution.key10'/*启用*/)
      if(status === "undistributed")
        return messages('report-distribution.key34'/*未分配*/)
      else
        return messages('report-distribution.key11'/*未启用*/)

  }


  getList = () => {
    this.setState({loading: true});
    let params = this.state.searchParams;
    let { page, pageSize } = this.state;
    ReportDistributionService.getReportList(page, pageSize,params).then((response) => {
      response.data.map((item,index) => {
        item.index = index + page * pageSize + 1;
        item.key = item.code;
      });
      this.setState({
        data: response.data,
        loading: false,
        pagination: {
          total: Number(response.headers['x-total-count']) ? Number(response.headers['x-total-count']) : 0,
          onChange: this.onChangePager,
          current: this.state.page + 1
        }
      })
    });
  }

  //翻页
  onChangePager = (page) => {
    if(page - 1 !== this.state.page)
      this.setState({page: page - 1,}, this.getList);
  };

  //切换标签页
  onChangeTabs = (activeKey) => {
    //this.refs.searcharea.handleReset();
    this.clear();
    this.setState({
      status: activeKey,
      page: 0,
      searchParams: {
        name:  '',
        code:  '',
        reportHeadAttr:  null,
        status: activeKey === 'UNASSIGNED' ? 'undistributed' : null
      }
      }, () => {
      this.getList();
    })
  };

  //搜索
  search = (result) => {
    this.setState({
      page: 0,
      searchParams: {
        name: result.name ? result.name : '',
        code: result.code ? result.code : '',
        reportHeadAttr: result.reportAttr !== null ? result.reportAttr : null,
        status: this.state.status === 'UNASSIGNED' ? 'undistributed' : (result.status !== null ? result.status : null)
      }
    }, () => {
      this.getList();
    })
  };
  //清除搜索条件
  clear = () => {
    this.setState({
      searchParams: {
        name: '',
        code: '',
        reportAttr: null,
        status: null
      }
    });
    this.form.props.form.resetFields();
  };

  //查看报表详情
  handleViewDetail = (e, record) => {
    let path = this.reportDetail.url.replace(":reportHeadOID", record.reportHeadOID).replace(":status", this.state.status);
    this.setState({reportHeadOID: record.reportHeadOID});
    this.context.router.push(path);
  }

  //渲染Tabs
  renderTabs(){
    return (
      this.state.tabs.map(tab => {
        return <TabPane tab={tab.name} key={tab.key} />
      })
    )
  }
  render(){
    const {status,assignedSearchForm,data,pagination,columns,loading,unassignedSearchForm} = this.state;
    return(
      <div>
        <Tabs defaultActiveKey={status} onChange={this.onChangeTabs}>
          {this.renderTabs()}
        </Tabs>
        <SearchArea
          // ref = "searcharea"
          wrappedComponentRef={(form) => this.form = form}
          searchForm = { status === "ASSIGNED" ? assignedSearchForm : unassignedSearchForm}
          submitHandle = {this.search}
          clearHandle = {this.clear}
        />
        <div className="table-header">
          <div
            className="table-header-title">{messages("common.total", {total: pagination.total ? pagination.total : '0'})}</div>
          {/* 共搜索到total条数据 */}
        </div>
        <ResizeTable
          columns={columns}
          dataSource={data}
          pagination={pagination}
          loading={loading}
          bordered
        />
      </div>
    )
  }
}
ReportDistribution.contextTypes = {
  router: React.PropTypes.object
};
export default ReportDistribution;
